<template>
  <section ref="refChart" class="chart_wrap" :class="className" :style="{ height: height, width: width }"></section>
</template>

<script setup>
import { onMounted, onBeforeUnmount, ref, watch, nextTick } from 'vue'
import * as echarts from 'echarts'
import { myDebounce } from '@/utils/index'

/**
 * 父组件参数
 */
const props = defineProps({
  className: {
    type: String,
    default: 'chart'
  },
  width: {
    type: String,
    default: '100%'
  },
  height: {
    type: String,
    default: '100%'
  },
  chartFontColor: {
    type: String,
    default: '#000'
  },
  autoResize: {
    type: Boolean,
    default: true
  },
  chartData: {
    type: Object,
    required: true
  },
  txtFontSize: {
    type: Number,
    default: 15
  }
})

/**
 * 定义变量
 */
let myChart = null // 图表
const refChart = ref(null) // 图表ref

let times = 0

const chartConfig = {
  barWidth: '10',
  textStyle: {
    color: '#fff',
    fontSize: 10.5,
  },
  lineStyle: {
    color: 'rgba(255, 255, 255, .6)', // 设置横坐标线颜色
    // width: 2, // 设置横坐标线宽度
  }
}

/**
 * 监听数据
 */
// setoption解构传参用这种监听
/* watch(
  props.chartData,
  (val) => {
    setOption(val)
  },
  { deep: true }
) */
watch(() => props.chartData, val => {
  setOption(val)
})

/**
 * 方法
 */
/**
 * 工具方法
 */
const setProxyData = (proxyData) => JSON.parse(JSON.stringify(proxyData))

const chatLoading = (flag) => {
  // console.log("loading状态", flag)
  switch (flag) {
    case "start":
      myChart.showLoading();  // 开启loading状态 开始渲染
      break;
    case "end":
      myChart.hideLoading();  // 关闭loading状态 渲染完成
      break;
  }
}

/**
 * 图表相关
 */
// 销毁图表
const destroyChart = (next) => {
  if (myChart) {
    myChart.dispose()
    myChart = null

    if (next) {
      next()
    }
  }
}
// 重置图表
const resetChart = () => {
  // console.log("初始化图表", myChart)

  destroyChart(() => {
    // 重新启动图表
    initChart()
  })
}
// 初始化图表
const initChart = () => {
  myChart = echarts.init(refChart.value, 'macarons')
  setOption(props.chartData);

  window.addEventListener('resize', myDebounce(() => {
    resetChart()
  }));
}

// 设置图表
const setOption = (chartData) => {
  chatLoading('start') // 开启loading状态 开始渲染

  if (JSON.stringify(chartData) === '[]') {
    times++
    if (times > 1) {
      chatLoading('end')
    }
    return
  }

  chatLoading('end')

  // 绘制图表
  myChart.setOption(
    // ----------------------------  图表配置开始
    {
      title: {
        text: '退服工单数量(个)',
        top: "2.5",
        right: '1%',
        textStyle: {
          color: '#fff',
          fontSize: 11,
        }
      },
      tooltip: {
        trigger: 'axis',
        textStyle: {
          color: '#000',
          fontSize: 11,
        },
        axisPointer: {
          type: 'cross',
          crossStyle: {
            color: '#fff'
          }
        }
      },
      grid: {
        left: '3%',
        right: '4%',
        top: '7.8%',
        height: '88%',
        containLabel: true
      },
      xAxis: {
        type: 'value',
        offset: -2,
        min: 0,
        axisLabel: {
          // formatter: '{value} ',
          textStyle: {
            color: "#fff"
          }
        },
        axisLine: {
          show: true, // 显示y轴线
          lineStyle: chartConfig.lineStyle
        },
        axisLabel: {
          padding: [0, 0, 0, -11],
          interval: 0, // 横轴信息全部显示
          rotate: 0,
          ...chartConfig.textStyle,
          align: 'left',
        },
        axisTick: {
          show: false,  // 隐藏刻度线
        },
        splitLine: {
          show: false
        }
      },
      yAxis: {
        type: "category",
        data: chartData.map(item => item.name),
        axisLine: {
          show: false
        },
        axisLabel: {
          interval: 0,
          margin: 20,
          textStyle: {
            color: "#fff"
          }
        },
        splitLine: {
          show: false,
        },
        axisTick: {
          show: false,  // 隐藏刻度线
        },
        axisLine: {
          show: true, // 显示y轴线
          lineStyle: chartConfig.lineStyle
        },
        axisLabel: {
          color: '#fff',
          fontSize: 10,
        }
      },
      series: [
        {
          name: '无线维护指标',
          type: 'bar',
          barWidth: 8,
          data: chartData.map(item => item.wirelessIndicators),
          label: {
            show: true, //开启显示
            position: 'right', //在上方显示
            color: '#4ABEFE',
            fontSize: 10.5,
            // formatter: '{c}个',
            fontWeight: 800
          },
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
              { offset: 0, color: 'rgba(197, 163, 86, 0.2)' },
              { offset: 1, color: '#C5A356' },
            ]),
          },
        },
      ]
    }
    // ----------------------------  图表配置结束
  )

}

/**
 * 生命周期
 */
onMounted(() => {
  nextTick(() => {
    initChart() // 初始化图表
  })
})

onBeforeUnmount(() => {
  destroyChart() // 销毁图表
})

/**
 * 暴露方法
 */
defineExpose({
  resetChart,
  chatLoading
})
</script>

<style lang="scss" scoped>
.chart_wrap {
  min-height: 100px;
  // cursor: pointer;
}
</style>
